
(function($) {
  var fileNameStr = "";
  var filetype = 'img'
  $.fn.upload = function(options) {
    $.fn.upload.defaults = {
      // 组件最外层id
      id: "productImages",
      // 包裹整个预览区图片组id
      previewID: "productImagesPreview",
      //绑定的上传按钮元素ID
      buttonID: "productUploadButton",
      //预览区文件宽度
      previewFileWidth: 110,
      //预览区文件高度
      previewFileHeight: 100,
      //上传的总文件数量
      fileNumber: 5,
      //上传文件类型
      filetype: "jpg|jgps|gif|png",
      //单行文件数量
      singleFileNumber: 3,
      inputID: "fileInputID",
      uploadURL: "http://localhost:8087/upload/fileUpload",
      style: 1 // 1代表预览图效果
    };
    
    params = $.extend({}, $.fn.upload.defaults, options || {});

    if (params.style === 1) {
      $("#" + params.previewID).css("width", params.singleFileNumber * (params.previewFileWidth + 12) + "px");
      $("#" + params.buttonID).css({
        "width": params.previewFileWidth,
        "height": params.previewFileHeight
      })
    } else if (params.style === 2) {
      $("#" + params.buttonID).css({
        "width": "34px",
        "height": "34px",
        "fontSize": "18px"
      })
      $($("#" + params.buttonID)[0].children[1]).css({
        "fontSize": "18px"
      })
    }
    // 初始化一个修改文件的按钮
    var editInput =
      "<input class='edit-input' type='file' multiple style='display: none;'>";
    $("#" + params.previewID).append(editInput);
    // 判断用户需要上传文件还是图片
    params.filetype.split("|").forEach(function(item) {
      if (
        item === "jpg" ||
        item === "jpgs" ||
        item === "gif" ||
        item === "png"
      ) {
        filetype = "img";
      } else {
        filetype = "other";
      }
    });

    if (params.style === 1) {
      if (filetype === "img") {
        // 上传图片
        uploadImg(params);
      } else {
        // 上传文件
        uploadFile(params);
      }
    } else if (params.style === 2) {
      $('.img-list').attr('class', 'tree-img-list')
      uploadFile(params);
    }

    // 上传文件
    function uploadFile(params) {
      $(".file-input")[0].addEventListener("change", function(e) {
        var file = e.target.files[0];
        if (filetype === 'img') {
          if (!/image\/\w+/.test(file.type)) {
            alert("请上传图片");
            return false;
          }
        } else {
          if (/image\/\w+/.test(file.type)) {
            alert("请上传文件");
            return false;
          }
        }
        readFile(file, function() {
          // 文件布局
          var imgDiv = $("<div class='img-div'></div>")
          var fileEle = $("<div class='file'></div>")
          var fileIcon = $("<span class='file-icon'>&#xe6a8;</span>")
          var fileName = $("<span class='file-name'></span>")
          var menu = $("<div class='menu'></div>")
          var row = $("<div class='row'></div>")
          var editBtn = $("<span class='edit'>&#xe64c;</span>")
          var delBtn = $("<span class='delete'>&#xe607;</span>")
          if ($("#" + params.previewID)[0].children.length <= params.fileNumber) {
            $("#" + params.previewID).append(imgDiv);
            progressAnimate(params, file, imgDiv, function() {
              imgDiv.append(fileEle)
                fileEle.append(fileIcon)
                fileEle.append(fileName)
              imgDiv.append(menu)
                menu.append(row)
                  row.append(editBtn)
                  row.append(delBtn)
              // 动态更改图片大小
              if (params.style === 1) {
                imgDiv.css({
                  "width": params.previewFileWidth,
                  "height": params.previewFileHeight
                })
              }
              // 修改图片
              edit(editBtn, imgDiv, fileName[0], params);
              // 删除图片
              del(delBtn, imgDiv);
              fileName[0].innerHTML = file.name
            })
          } else {
            alert("最多上传" + params.fileNumber + "张图片");
          }
          // 允许上传重复照片
          $(".file-input")[0].value = "";
        });
      });
    }

    // 上传图片
    function uploadImg(params) {
      //  触发事件用的是change，因为files是数组，需要添加下标
      $(".file-input")[0].addEventListener("change", function(e) {
        var file = e.target.files[0];
        if (!/image\/\w+/.test(file.type)) {
          alert("请上传图片");
          return false;
        }
        readFile(file, function(readEvent) {
          // 预览区布局
          var imgDiv = $("<div class='img-div'></div>")
          var previewImg = $("<img />");
          previewImg[0].src = readEvent.target.result
          var menu = $("<div class='menu'></div>")
          var row1 = $("<div class='row'></div>")
          var viewBtn = $("<span class='view'>&#xe60d;</span>")
          var editBtn = $("<span class='edit'>&#xe64c;</span>")
          var delBtn = $("<span class='delete'>&#xe607;</span>")
          if ($("#" + params.previewID)[0].children.length <= params.fileNumber) {
            $("#" + params.previewID).append(imgDiv);
            imgDiv.css({
              "width": params.previewFileWidth,
              "height": params.previewFileHeight
            })
            // 调用进度条
            progressAnimate(params, file, imgDiv, function() {
              imgDiv.append(previewImg)
              imgDiv.append(menu)
                menu.append(row1)
                  row1.append(viewBtn)
                  row1.append(editBtn)
                  row1.append(delBtn)
              imgDiv.css({
                "width": params.previewFileWidth,
                "height": params.previewFileHeight
              })
              previewImg.css({
                "width": params.previewFileWidth,
                "height": params.previewFileHeight
              })
              // 查看图片
              view(viewBtn, previewImg);
              // 修改图片
              edit(editBtn, imgDiv, previewImg[0], params);
              // 删除图片
              del(delBtn, imgDiv);
            })
          } else {
            alert("最多上传" + params.fileNumber + "张图片");
          }
          // 允许上传重复照片
          $(".file-input")[0].value = "";
        })
      });
      closeMask();
    }
    // 查看按钮
    function view(viewBtn, img) {
      $(viewBtn)[0].addEventListener("click", function() {
        var mask = document.createElement("div");
        document.body.appendChild(mask);
        mask.id = "mask"
        $(mask).css("background", "rgba(0, 0, 0, .93)");
        var imgClone = $("<img />")
        imgClone[0].src = img[0].src
        $(mask).append(imgClone)
      });
    }
    // 修改按钮
    function edit(editBtn, ele, imgFile, params) {
      $(editBtn)[0].addEventListener("click", function(e) {
        $(".edit-input")[0].click(function() {
          return false;
        });
        // 防止叠加触发change事件,所以用one来绑定
        $(".edit-input").one("change", function(e) {
          var file = e.target.files[0];
          var _this = $(".edit-input")[0];
          if (filetype === 'img') {
            if (!/image\/\w+/.test(file.type)) {
              alert("上传的图片格式错误，请上传图片");
              _this.value = "";
              return false;
            }
          } else {
            if (/image\/\w+/.test(file.type)) {
              alert("请上传文件");
              _this.value = "";
              return false;
            }
          }
          readFile(file, function(e) {
            progressAnimate(params, file, ele, function() {
              if (filetype === 'img') {
                if (params.style === 1) {
                  imgFile.src = e.target.result;
                } else if (params.style === 2) {
                  imgFile.innerHTML = $('.edit-input')[0].files[0].name
                }
              } else {
                imgFile.innerHTML = $('.edit-input')[0].files[0].name
              }
              $(".edit-input")[0].value = "";
            })
          })
        });
      });
    }
    // 删除按钮
    function del(delBtn, ele) {
      $(delBtn)[0].addEventListener("click", function(e) {
        ele.remove()
      });
    }

    function progressAnimate(params, file, imgDiv, success) {
      var fileParams = new FormData();
      fileParams.append("file", file);
      fileParams.append("field", 1);
      // 调用接口
      $.ajax({
        type: "post",
        url: params.uploadURL,
        data: fileParams,
        processData: false, // 告诉jQuery不要去处理发送的数据
        contentType: false, // 告诉jQuery不要去设置Content-Type请求头
        success: function(data) {
          if (data.success) {
            if (params.style === 1) {
              imgDiv.css({
                "width": params.previewFileWidth,
                "height": params.previewFileHeight
              })
            }
            var progressEle = $('<div class="upload-btn-progress"></div>')
            imgDiv.append(progressEle);
            progressEle.animate({
              "width": "100%"
            }, 100, function(){
              fileNameStr += data.data;
              $("#" + params.inputID)[0].value = fileNameStr;
              progressEle[0].textContent = "上传成功";
              progressEle.remove()
              success()
            })
          } else {
            alert('上传失败')
          }
        },
        error: function(e) {
          imgDiv.remove()
          alert('上传失败')
        }
      });
    }

    // 关闭遮罩层
    function closeMask() {
      document.body.addEventListener("click", function() {
        $("#mask").remove();
      }, true);
    }

    function readFile(file, callback) {
      var reader = new FileReader();
      reader.error = function(e) {
        alert("读取异常");
      };
      reader.onload = callback;
      reader.onloadstart = function() {
        console.log("开始读取");
      };
      reader.onprogress = function(e) {
        if (e.lengthComputable) {
          console.log("正在读取文件");
        }
      };
      reader.readAsDataURL(file);
    }
  };
})(jQuery);
